.admin-auto-images {
	.auto-image_ul {
		display: flex;
		flex-direction: column;

		.auto-image_head {
			border-bottom: 1px solid #eeeeee;
			display: flex;
			align-items: center;

			.image_head-li {
				padding: 15px 15px;
				cursor: pointer;
				font-size: 13px;
				position: relative;
			}

			.image_head-li:hover {
				color: #247af3;
			}

			.image_head-active {
				color: #247af3;
			}

			.image_head-active::after {
				content: "";
				height: 2px;
				background-color: #247af3;
				position: absolute;
				bottom: 0;
				left: 10px;
				right: 10px;
			}
		}

		.auto-image_grid {
			display: flex;
			align-items: center;
			padding: 10px 0;

			.image_grid-li {
				padding: 8px 16px;
				border: 1px solid #dadada;
				margin-left: 10px;
				border-radius: 3px;
				cursor: pointer;
				font-size: 12px;
			}

			.image_grid-li:hover {
				background-color: #247af3;
				color: #fff;
			}

			.image_grid-gactive {
				background-color: #247af3;
				color: #fff;
			}
		}

		.auto-image_search {
			display: flex;
			align-items: center;
			padding: 10px;

			.search-input {
				width: 250px;
			}

			.search-but {
				height: 32px;
				line-height: 32px;
				background-color: #247af3;
				color: #fff;
				padding: 0 16px;
				border-radius: 3px;
				cursor: pointer;
				margin-left: 10px;

				i {
					margin-right: 5px;
				}
			}
		}

		.auto-image_conter {
			flex: 1;
			min-height: 0;
			overflow: auto;
			padding: 5px;

			.auto-image_bli {
				width: 250px;
				padding: 5px;
				display: inline-block;

				.auto-image_trpo {
					width: 100%;
					border: 1px solid #f1f1f1;
					border-radius: 3px;
					cursor: pointer;

					.auto-image_htop {
						width: 100%;
						position: relative;

						.auto-image_mark {
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							z-index: 10;
							background-color: rgba(0, 0, 0, 0.5);
							display: none;
							flex-wrap: wrap;
							align-items: center;
							justify-content: center;

							.auto-image_mbox {
								width: 180px;
							}

							.auto-image_buts {
								display: inline-block;
								background-color: #9c53c4;
								font-size: 13px;
								color: #ffffff;
								width: 80px;
								text-align: center;
								height: 30px;
								line-height: 30px;
								border-radius: 30px;
								margin-right: 10px;
								margin-top: 10px;
							}

							.auto-image_buts1 {
								background-color: blue;
							}

							.auto-image_buts2 {
								background-color: red;
							}
						}

						.el-icon-circle-close {
							color: #ffffff;
							font-size: 30px;
						}
					}

					.auto-image_text {
						font-size: 12px;
						color: #000;
						padding: 10px 5px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.auto-image_trpo:hover .auto-image_htop .auto-image_mark {
					display: flex;
				}
			}
		}

		.auto-image_pagin {
			text-align: right;
			border-top: 1px solid #f1f1f1;
			padding: 10px;
		}
	}
}